<template>
	<div style="width: 100%; height: 100%;">
		<div class="dashboard-share-background-image"></div>
		<div class="ScreenAdapter" :style="style">
			<slot />
		</div>
	</div>
</template>
<script setup>
	import { onMounted, reactive } from 'vue';

	const props = defineProps({
		width: { type: Number, default: 1920 },
		height: { type: Number, default: 1080 },
	});

	const style = reactive({
		width: props.width + 'px',
		height: props.height + 'px',
		transform: 'scale(1)',
	});

	const Debounce = (fn, t = 500) => {
		let timer;
		return (...args) => {
			if (timer) {
				clearTimeout(timer);
			}
			timer = setTimeout(() => {
                console.log(3333333)
				timer = null;
				fn(...args);
			}, t);
		};
	};

	// 获取放大缩小比例
	const getScale = () => {
		const w = (window.innerWidth) / props.width;
		const h = (window.innerHeight) / props.height;
		return w < h ? w : h;
	};

	// 设置比例
	const setScale = () => {
		style.transform = 'scale(' + getScale() + ')';
		style.marginTop = -(props.height / 2) * getScale() + 'px';
		style.marginLeft = -(props.width / 2) * getScale() + 'px';
	};

	onMounted(() => {
		setScale();
		// window.onresize = Debounce(setScale, 1000);
        window.addEventListener('resize', Debounce(setScale, 1000));
        document.addEventListener('fullscreenchange', Debounce(setScale, 1000));
        document.addEventListener('webkitfullscreenchange', Debounce(setScale, 1000));
        document.addEventListener('mozfullscreenchange', Debounce(setScale, 1000));
        document.addEventListener('msfullscreenchange', Debounce(setScale, 1000));
	});
</script>
<style lang="scss" scoped>
	.ScreenAdapter {
		transform-origin: 0% 0%;
		position: absolute;
		left: 50%;
		top: 50%;
		transition: 0.3s;
		background: linear-gradient(to bottom, #16163d 0%, #070712 100%);
		user-select: none;
	}
	.ScreenAdapter::before {
		width: 0;
	}
	.dashboard-share-background-image {
		position: absolute;
		inset: 0px;
		overflow: scroll;
		z-index: -1;
		visibility: hidden;
	}
</style>
